<template>
  <!-- alias tools-view -->
  <div class="nav-view">
    <div class="toolbar">
      <div class="left sider">
        <div
          class="connect item"
          title="连接管理"
          @click="navClick('create-connection')"
        >
          <icon name="icon-lianjie"></icon>
        </div>

        <div
          class="editor item"
          title="新建查询编辑器"
          @click="navClick('new-sqleditor')"
        >
          <icon name="icon-bianjiqi"></icon>
        </div>

        <div
          class="action item"
          title="执行选中SQL"
          @click="navClick('execute-sql')"
        >
          <icon name="icon-zhihang"></icon>
        </div>

        <div
          class="action item"
          title="刷新对象"
          @click="navClick('refresh-object')"
        >
          <icon name="icon-shuaxin"></icon>
        </div>

        <div
          class="action item"
          title="设置用户"
          @click="navClick('settings-user')"
        >
          <icon name="icon-yonghu"></icon>
        </div>

        <div class="action item" title="导入" @click="navClick('import')">
          <icon name="icon-daoru"></icon>
        </div>

        <div class="action item" title="导出" @click="navClick('export')">
          <icon name="icon-daochu"></icon>
        </div>

        <div class="action item" title="设置" @click="navClick('settings')">
          <icon name="icon-shezhi"></icon>
        </div>
      </div>

      <div class="right sider">
        <div class="action item" title="测试功能" @click="navClick('test')">
          <icon name="icon-bug"></icon>
        </div>
      </div>
    </div>

    <!-- 各种设置界面 -->
    <!-- 新建连接：输入项、保存的连接配置 -->
    <connects-view />
  </div>
</template>

<script>
import connactionsView from "@/views/connects-view";
export default {
  name: "nav-view",
  components: {
    "connects-view": connactionsView,
  },
  methods: {
    navClick(code) {
      this.navHandler(code);
    },
    navHandler(code) {
      console.log(this.$store.state.ui);
      switch (code) {
        case "create-connection": {
          console.log("创建新连接..");
          this.$store.state.ui.newConnaction.drawer = true;
          break;
        }
        case "new-sqleditor": {
          console.log("新建sql编辑器");
          break;
        }
        case "execute-sql": {
          console.log("执行(选中的)sql语句");
          break;
        }
        case "refresh-object": {
          // {type:'mysql57',code:'showdatabases','sql':'SHOW DATABASES;'}
          let data = {
            type: "mysql57",
            code: "showdatabases",
            sql: "SHOW DATABASES;",
          };
          this.$store.dispatch("execute/execute", data);
          // TODO 执行 SHOW DATABASES;
          break;
        }
        case "settings-user": {
          console.log("设置用户");
          break;
        }
        case "import": {
          console.log("导入");
          break;
        }
        case "export": {
          console.log("导出");
          break;
        }
        case "settings": {
          console.log("设置");
          break;
        }
        case "test": {
          console.log("测试功能");
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-view {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
  .toolbar {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .sider {
      display: flex;
      .item{
        display: inline-flex;
        margin-right: 15px;
      }
      .item:hover,.item:active{
        opacity: .8;
      }
    }
    .left {
      max-width: 800px;
      flex: 1;
      flex-wrap: nowrap;
    }

    .icon-svg {
      width: 1.2em !important;
      height: 1.2em !important;
      max-width: 25px;
      max-height: 25px;
    }
  }
}
</style>
